<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-17 14:13:05
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="persona animated bounceInRight">
    <div class="header">
      <div @click="histry">
        <img src="../assets/histry.png">
        返回
      </div>
      <span class="reg" style="margin-left:-0.1rem;">我的设置</span>
      <span class="log" @click="bao_cun">保存</span>
    </div>
    <div style="height:0.1rem;background:#eee;"></div>
    <ul class="ul">
      <li>
        <input type="file" @change="getImgBaseb()" class="touxiang_shang">
        <p>头像</p>
        <div>
          <img class="img1" :src="tou_she?imgBase64[0]:tou_yuan" alt>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="dian_name">
        <p>
          姓名
          <span class="xing">*</span>
        </p>
        <div>
          <span>{{name}}</span>
          <!-- <input class="input" type="text" :value="name" @blur="blu" @focus="focu" @keyup="keyu"> -->
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
    </ul>
    <div style="height:0.1rem;background:#eee;"></div>
    <ul class="ul">
      <li @click="jin_phone">
        <p>
          手机号
          <span>(可添加备用手机号)</span>
        </p>
        <div>
          <span>{{phone}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="jin_email">
        <p>
          邮箱
          <span>(可添加备用邮箱)</span>
          <span class="xing">*</span>
        </p>
        <div>
          <span>{{email}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
    </ul>
    <div style="height:0.1rem;background:#eee;"></div>
    <ul class="ul">
      <li @click="xing_bie">
        <p>
          性别
          <span class="xing">*</span>
        </p>
        <div>
          <span>{{gender}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="brday_sj">
        <p>
          生日
          <span class="xing">*</span>
        </p>
        <div>
          <span>{{birthday}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="xuan_diqu">
        <p>
          所选地区
          <span>(省/市)</span>
          <span class="xing">*</span>
        </p>
        <div>
          <span>{{region}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
    </ul>
    <div style="height:0.1rem;background:#eee;"></div>
    <ul class="ul">
      <li @click="jin_vx">
        <p>
          微信号
          <span>(选填)</span>
        </p>
        <div>
          <span>{{vx}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="jin_ding">
        <p>
          钉钉号
          <span>(选填)</span>
        </p>
        <div>
          <span>{{ding}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
      <li @click="jin_shen">
        <p>
          身份证号
          <span>(选填)</span>
        </p>
        <div>
          <span>{{shenfen}}</span>
          <img class="img2" src="../assets/right_jiantou.png" alt>
        </div>
        <div class="dian_quan"></div>
      </li>
    </ul>
    <mt-popup v-model="popupVisib" position="center" class="category_box1">
      <div class="category">
        <p class="text">添加姓名</p>
        <input type="text" placeholder="请输入姓名" v-model="name1">
        <div>
          <p class="text1" @click="name_no">取消</p>
          <p class="text2" @click="name_ok">确定</p>
        </div>
      </div>
    </mt-popup>
    <!-- <mt-popup v-model="popupVisiba" position="bottom" class="category_box2">
      <div class="category">
        <p class="text">性别</p>
        <div style="height:0.01rem;background:#eee;width:100%;"></div>
        <ul>
            <li @click="nan"><div :class="xingbie?'text1':'text2'"></div>男</li>
            <li @click="nv"><div :class="!xingbie?'text1':'text2'"></div>女</li>
        </ul>
        <p class="text3" @click="xing_ok">确定</p>
      </div>
    </mt-popup> -->
    <mt-popup v-model="popupVisiba" position="bottom" class="category_box2">
        <div class="title">
          <p class="text_1" @click="btn_close_xing">
            <img src="../assets/shut.png" alt>
          </p>
          <p class="text_2">性别</p>
          <p class="text_3" @click="xing_ok">确定</p>
        </div>
        <div class="text_content">
          <ul>
            <li
              v-for="(i,index) in text_tit"
              :class="{active:i_display==index}"
              :key="index"
              @click="text_dian(index)"
            >{{i.a}}</li>
            <!-- <li @click="nan"><div :class="xingbie?'text1':'text2'"></div>男</li>
            <li @click="nv"><div :class="!xingbie?'text1':'text2'"></div>女</li> -->
          </ul>
        </div>
      </mt-popup>
    <mt-popup v-model="popupVisibl" position="bottom" class="bottom_mode">
      <!-- <div class="title">
        <p class="text_1" @click="btn_close">
          <img src="../assets/shut.png" alt>
        </p>
        <p class="text_2">出生日期</p>
        <p class="text_3" @click="btn_sure">确定</p>
      </div> -->
      <van-datetime-picker
        v-model="pickerVisible"
        type="date"
        :min-date='minDate'
        :max-date='maxDate'
        @confirm='btn_sure'
        @cancel='btn_close'
        title="出生日期"
        confirm-button-text='确定'
        :visibleItemCount='3'
      >
      </van-datetime-picker>
    </mt-popup>
    <mt-popup v-model="popupVisibla" position="bottom" class="bottom_mode">
      <!-- <div class="title">
        <p class="text_1" @click="btn_diqu">
          <img src="../assets/shut.png" alt>
        </p>
        <p class="text_2">选择地区</p>
        <p class="text_3" @click="btn_sure_diqu">确定</p>
      </div> -->
      <van-area
        :area-list="areaList"
        :visibleItemCount='3'
        @confirm='btn_sure_diqu'
        @cancel='btn_diqu'
        confirm-button-text='确定'
        title="选择地区"
        ref="di"
      />
    </mt-popup>
  </div>
</template>

<script>
import { check_login,get_my_info,update_user_info } from "../api/api.js";
import addressinfo from '../area.js'
export default {
  name: "persona",
  data() {
    return {
      name: "未命名",
      name1:'',
      phone: "",
      email: "未添加",
      gender: "",
      birthday: "未添加",
      region: "未添加",
      vx: "未添加",
      ding: "未添加",
      shenfen: "未添加",
      popupVisib: false,
      popupVisiba: false,
      xingbie:true,
      popupVisibl:false,
      minDate:new Date('1950-01-01'),
      maxDate:'',
      pickerVisible:'',
      xian_shijian:'',
      birthday_fa:'',
      popupVisibla:false,
      areaList:addressinfo,
      lei:'',
      imgBase64:[],
      xin:'',
      user_id:'',
      tou_she:false,
      tou_yuan:'',
      emails:'',
      phone_bei:'',
      text_tit: [{ a: "男" }, { a: "女" }],
      i_display:0
    };
  },
  mounted() {
    if (sessionStorage.getItem("mobile") != null) {
      this.phone = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.phone
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    this.jiazai()
  },
  created(){
    this.pa()
    this.jinyue()
    this.maxDate=new Date(this.xian_shijian)
    this.pickerVisible=new Date('2000-01-01')
  },
  watch: {
    imgBase64(){
      if(this.imgBase64.length==1){
        this.tou_she=true
      }else{
        this.tou_she=false
      }
    }
  },
  methods: {
    // 加载在页面上的一些小文字
    jiazai(){
      if (sessionStorage.getItem("mlbb_email") != null) {
        this.email = JSON.parse(sessionStorage.getItem("mlbb_email"));
      }
      if (sessionStorage.getItem("mlbb_emails") != null) {
        this.emails = JSON.parse(sessionStorage.getItem("mlbb_emails"));
      }
      if (sessionStorage.getItem("mlbb_phone_bei") != null) {
        this.phone_bei = JSON.parse(sessionStorage.getItem("mlbb_phone_bei"));
      }
      if (sessionStorage.getItem("mlbb_name") != null) {
        this.name = JSON.parse(sessionStorage.getItem("mlbb_name"));
      }
      if (sessionStorage.getItem("mlbb_xing") != null) {
        this.gender = JSON.parse(sessionStorage.getItem("mlbb_xing"));
        if(this.gender=='男'){
          this.i_display=0
        }else if(this.gender=='女'){
          this.i_display=1
        }
      }
      if (sessionStorage.getItem("mlbb_brday") != null) {
        this.birthday = JSON.parse(sessionStorage.getItem("mlbb_brday"));
      }
      if (sessionStorage.getItem("mlbb_brday_fa") != null) {
        this.birthday_fa = JSON.parse(sessionStorage.getItem("mlbb_brday_fa"));
      }
      if (sessionStorage.getItem("mlbb_vx") != null) {
        this.vx = JSON.parse(sessionStorage.getItem("mlbb_vx"));
      }
      if (sessionStorage.getItem("mlbb_ding") != null) {
        this.ding = JSON.parse(sessionStorage.getItem("mlbb_ding"));
      }
      if (sessionStorage.getItem("mlbb_shenfen") != null) {
        this.shenfen = JSON.parse(sessionStorage.getItem("mlbb_shenfen"));
      }
      if (sessionStorage.getItem("mlbb_diqu") != null) {
        this.region = JSON.parse(sessionStorage.getItem("mlbb_diqu"));
      }
      if (sessionStorage.getItem("mlbb_xin") != null) {
        this.xin = JSON.parse(sessionStorage.getItem("mlbb_xin"));
      }
      if (sessionStorage.getItem("mlbb_lei") != null) {
        this.lei = JSON.parse(sessionStorage.getItem("mlbb_lei"));
      }
      if (sessionStorage.getItem("mlbb_imgBase64") != null) {
        this.imgBase64 = JSON.parse(sessionStorage.getItem("mlbb_imgBase64"));
      }
      // 获取基础信息
      if (sessionStorage.getItem("data_mobal") != null) {
        this.user_id = JSON.parse(
          JSON.parse(sessionStorage.getItem("data_mobal"))
        ).user_id;
      }
      get_my_info({data:{
        user_id:this.user_id
      }}).then(res=>{
        console.log(JSON.parse(res.data.body.data))
        var date=JSON.parse(res.data.body.data)
        if(res.data.code==10069){
          if(date.avatar!=undefined){
            this.tou_yuan=date.avatar
          }else{
            this.tou_yuan=require('../assets/mine_t.png')
          }
          if(date.name!=undefined){
            this.name=date.name
          }
          if(date.email!=undefined){
            this.email=date.email
          }
          if(date.area!=undefined){
            this.region=date.area
          }
          if(date.date_birth!=undefined){
            this.birthday=date.date_birth
          }
          if(date.sex!=undefined){
            this.gender=date.sex
          }
          if(date.wechat!=undefined){
            this.vx=date.wechat
          }
          if(date.dingtalk!=undefined){
            this.ding=date.dingtalk
          }
          if(date.idcard!=undefined){
            this.shenfen=date.idcard
          }
        }else if(res.data.code==10070){
          this.$toast('获取信息失败')
        }
      })
    },
    // 时间小于10前面加0
    pa(s) {
      return s < 10 ? "0" + s : s;
    },
    // 获取本月时间
    jinyue() {
      this.xian_shijian = new Date();
      var xian_sj = this.xian_shijian;
      this.xian_shijian =
        xian_sj.getFullYear() + "/" + this.pa(xian_sj.getMonth() + 1) + "/"+xian_sj.getDate();
      console.log(6666, this.xian_shijian);
    },
    // 返回上一层
    histry() {
      this.$router.push("/mine");
    },
    // 登录
    bao_cun() {
      if(this.name!='未命名'&&this.email!='未添加'&&this.gender!=''&&this.birthday!='未添加'&&this.region!='未添加'){
        if(this.user_id==''){
          this.user_id=null
        }
        if(this.name==''){
          this.name=null
        }
        if(this.emails==''){
          this.emails=null
        }
        if(this.phone_bei==''){
          this.phone_bei=null
        }
        if(this.gender==''){
          this.gender=null
        }
        if(this.birthday_fa==''){
          this.birthday_fa=null
        }
        if(this.region==''){
          this.region=null
        }
        if(this.vx=='未添加'){
          this.vx=null
        }
        if(this.ding=='未添加'){
          this.ding=null
        }
        if(this.xin==''){
          this.xin=null
        }
        if(this.lei==''){
          this.lei=null
        }
        if(this.shenfen=='未添加'){
          this.shenfen=null
        }
        this.$loading.open();
        update_user_info({data:{
          user_id:this.user_id,
          name:this.name,
          email:this.emails,
          mobile_add:this.phone_bei,
          sex:this.gender,
          date_birth:this.birthday,
          area:this.region,
          wechat:this.vx,
          dingtalk:this.ding,
          idcard:this.shenfen,
          avatar_data:this.xin,
          avatar_data_type:this.lei
        }}).then(res=>{
          this.$loading.close();
          if(res.data.code==10067){
            this.$toast('保存成功')
            this.$router.push("/mine");
          }else if(res.data.code==10068){
            this.$toast('保存失败')
          }
        })
      }else{
        this.$toast('请填完必填项')
      }
      // this.$router.push("/mine");
      // 
    },
    // 点击名字
    // blu(e){
    //   console.log(111)
    //   this.bao()
    //   console.log(e)
    // },
    // focu(e){
    //   console.log(222)
    //   this.bao()
    //   console.log(e)
    // },
    // keyu(e){
    //   console.log(333)
    //   this.bao()
    //   console.log(e)
    // },
    // bao(){
    //   console.log(1111)
    //   sessionStorage.setItem("mlbb_name", JSON.stringify(this.name));
    // },
    dian_name() {
      this.popupVisib = true;
    },
    name_ok(){
        this.name=this.name1;
        this.popupVisib = false;
        sessionStorage.setItem("mlbb_name", JSON.stringify(this.name));
        this.name1=''
    },
    name_no(){
        this.popupVisib = false;
        this.name1=''
    },
    // 点击性别
    xing_bie(){
        this.popupVisiba = true;
    },
    // nan(){
    //     this.xingbie=true
    // },
    // nv(){
    //     this.xingbie=false
    // },
    // 点击功能字体
    text_dian(i) {
      if(this.text_tit[i].a=='男'){
        this.xingbie=true
      }else if(this.text_tit[i].a=='女'){
        this.xingbie=false
      }
      this.i_display = i;
    },
    btn_close_xing(){
      this.popupVisiba = false;
    },
    xing_ok(){
        if(this.xingbie){
            this.gender="男"
            sessionStorage.setItem("mlbb_xing", JSON.stringify(this.gender));
            this.popupVisiba = false;
        }else{
            this.gender="女"
            sessionStorage.setItem("mlbb_xing", JSON.stringify(this.gender));
            this.popupVisiba = false;
        }
    },
    // 点击关闭 生日
    btn_close(){
      this.popupVisibl=false
    },
    btn_sure(val){
      console.log(val)
      var d = this.pickerVisible;
      this.birthday = d.getFullYear() + "-" + this.pa(d.getMonth() + 1) + "-"+this.pa(d.getDate());
      this.birthday_fa=d.getFullYear() + "" + this.pa(d.getMonth() + 1)+this.pa(d.getDate());
      sessionStorage.setItem("mlbb_brday", JSON.stringify(this.birthday));
      sessionStorage.setItem("mlbb_brday_fa", JSON.stringify(this.birthday_fa));
      console.log(6666, this.birthday_fa);
      this.popupVisibl=false
    },
    brday_sj(){
      this.popupVisibl=true
    },
    // 地区关闭
    btn_diqu(){
      this.popupVisibla=false
    },
    btn_sure_diqu(val){
      this.popupVisibla=false
      this.region=val[0].name+'-'+val[1].name+'-'+val[2].name
      sessionStorage.setItem("mlbb_diqu", JSON.stringify(this.region));
      console.log(val)
    },
    xuan_diqu(){
      this.popupVisibla=true
    },
    // 地区组件

    // 进添加备用手机号的页面
    jin_phone(){
      this.$router.push('/phonemine')
    },
    // 进邮箱页面
    jin_email(){
      this.$router.push('/emails')
    },
    // 进微信页面
    jin_vx(){
      this.$router.push('/vx')
    },
    // 进入钉钉页面
    jin_ding(){
      this.$router.push('/ding')
    },
    // 进入身份证页面
    jin_shen(){
      this.$router.push('/shenfen')
    },
    // 打开相册
    getImgBaseb(){
      this.imgBase64=[]
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      _this.lei = file.name.substring(file.name.indexOf("."), file.name.length);
      //转base64
      reader.onload = function(e) {
        _this.imgBase64.push(e.target.result);
        _this.xin = e.target.result.substring(
          e.target.result.indexOf(",") + 1,
          e.target.result.length
        );
        sessionStorage.setItem("mlbb_imgBase64", JSON.stringify(_this.imgBase64));
      };
      reader.readAsDataURL(file);
      console.log(this.imgBase64)
      sessionStorage.setItem("mlbb_xin", JSON.stringify(_this.xin));
      sessionStorage.setItem("mlbb_lei", JSON.stringify(_this.lei));
      
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.persona {
  height: 100vh;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.15rem;
    div {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #979797;
      font-size: 0.14rem;
      img {
        height: 0.16rem;
        width: 0.08rem;
        margin-right: 0.08rem;
      }
    }
    .reg {
      font-size: 0.18rem;
      color: #1a2533;
      font-weight: 500;
    }
    .log {
      font-size: 0.14rem;
      color: #e82716;
      font-weight: bold;
    }
  }
  .ul {
    padding: 0 0.15rem;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.5rem;
      border-bottom: 0.01rem solid #eee;
      // position: relative;
      overflow: hidden;
      .touxiang_shang{
        opacity: 0;
        position: absolute;
        height: 0.5rem;
        width: 90%;
        z-index: 10;
      }
      p {
        font-size: 0.14rem;
        color: #1a2533;
        font-weight: 400;
        position: relative;
        span {
          font-size: 0.14rem;
          color: #ccc;
          font-weight: 400;
        }
        .xing {
          // margin-top: 0.1rem;
          // position: absolute;
          // top: -0.07rem;
          // border:1px solid red;
          // height:0.1rem;
          color: #e82716;
          // margin-left: 0.02rem;
        }
      }
      div {
        display: flex;
        align-items: center;
        .img1 {
          height: 0.27rem;
          width: 0.27rem;
          border-radius: 50%;
          margin-right: 0.09rem;
        }
        span {
          font-size: 0.1rem;
          color: #ccc;
          font-weight: 400;
          margin-right: 0.1rem;
        }
        .img2 {
          height: 0.1rem;
          width: 0.06rem;
        }
        .input{
          text-align: right;
          // width:70%;
          display: block;
          margin-right:0.1rem;
          height:0.5rem;
          width:2.5rem;
          border:none;
          color:#ccc;
        }
      }
      .dian_quan{
        height:0.3rem;
        width:0.3rem;
        position: absolute;
        left: 50%;
        margin-left:-0.15rem;
        border-radius: 50%;
        transition: 0.5s all;
      }
      &:hover,&:active{
        .dian_quan{
          background: rgba(190,190,190,0.2);
          box-shadow:0px 0px 0.5rem 0.1rem rgba(190,190,190,0.5);
        }
      }
    }
  }
  .category_box1{
    .category {
      background-color: #fff;
      height: 1.1rem;
      width: 2.4rem;
      border-radius: 0.06rem;
      .text {
        text-align: center;
        font-size: 0.14rem;
        color: #1a2533;
        margin-top: 0.08rem;
      }
      input {
        margin-top: 0.31rem;
        border: none;
        border-bottom: 0.01rem solid #eee;
        width: 2.32rem;
        padding-left:0.08rem;
        padding-bottom: 0.02rem;
        color:#1A2533;
        font-size: 0.14rem;
      }
      input::-webkit-input-placeholder {
        color: #CCCCCC;
        font-size: 0.14rem;
      }

      input:-moz-placeholder {
        color: #CCCCCC;
        font-size: 0.14rem;
      }

      input::-moz-placeholder {
        color: #CCCCCC;
        font-size: 0.14rem;
      }

      input:-ms-input-placeholder {
        color: #CCCCCC;
        font-size: 0.14rem;
      }
      div {
        display: flex;
        justify-content: space-between;
        height: 0.38rem;
        margin-top:0.04rem;
        p{
            width:50%;
            font-size: 0.14rem;
            text-align: center;
            line-height: 0.38rem;
        }
        .text1{
            color:#888;
        }
        .text2{
            color:#A5C6FD
        }
      }
    }
  }
  .bottom_mode {
    width: 100%;
    height:30%;
    border-radius: 0.12rem 0.12rem 0 0;
    box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    .title {
      height: 0.43rem;
      border-radius: 0.06rem 0.06rem 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.21rem;
      border-bottom: 0.01rem solid #eee;
      .text_1 {
        height: 0.11rem;
        width: 0.11rem;
        margin-top: -0.1rem;
        img {
          height: 200%;
          width: 200%;
        }
      }
      .text_2 {
        color: #1a2533;
        font-size: 0.14rem;
        font-weight: 500;
      }
      .text_3 {
        color: #e82716;
        font-size: 0.14rem;
        font-weight: 500;
      }
    }
    .text_content {
      margin-top: 0.19rem;
      margin-bottom: 0.3rem;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          height: 0.3rem;
          width: 0.96rem;
          border-radius: 0.06rem;
          border: 1px solid #eee;
          margin: 0 0.06rem 0.14rem 0.13rem;
          text-align: center;
          line-height: 0.3rem;
          color: #a9a9a9;
          font-size: 0.16rem;
        }
        .active {
          background-color: #e9eff8;
          color: #1a2533;
        }
      }
    }
  }
  .category_box2 {
    width: 100%;
    border-radius: 0.12rem 0.12rem 0 0;
    box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.2);
    .title {
      height: 0.43rem;
      border-radius: 0.06rem 0.06rem 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.21rem;
      border-bottom: 0.01rem solid #eee;
      .text_1 {
        height: 0.11rem;
        width: 0.11rem;
        margin-top: -0.1rem;
        img {
          height: 200%;
          width: 200%;
        }
      }
      .text_2 {
        color: #1a2533;
        font-size: 0.14rem;
        font-weight: 500;
      }
      .text_3 {
        color: #e82716;
        font-size: 0.14rem;
        font-weight: 500;
      }
    }
    .text_content {
      margin-top: 0.19rem;
      margin-bottom: 0.3rem;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          height: 0.3rem;
          width: 0.96rem;
          border-radius: 0.06rem;
          border: 1px solid #eee;
          margin: 0 0.06rem 0.14rem 0.13rem;
          text-align: center;
          line-height: 0.3rem;
          color: #a9a9a9;
          font-size: 0.16rem;
        }
        .active {
          background-color: #e9eff8;
          color: #1a2533;
        }
      }
    }
  }
}
</style>
